<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/javascript" src="../js/styleSheets.js"></script>
<script type="text/javascript" src="../js/globalFunction.js"></script>
<script type="text/babel">
    /*
      事件机制：
      1.原生js中采用的是onclick的书写方法，而在React中，则需要onClick
      2.原生中是onclick="EventFunction()"进行调用，而React中则是onClick={this.EventFunction}
      3.React中function定义与render属于同级
      4.React中支持PC、移动的相应事件，并且以移动端事件为优先级
      5.在function中可以传递相应的参数，比如说事件参数，可以与原生js的事件相对比
     
      思考：
      如果想把多个事件放到jsx中供我们对象调用，需要如何考虑（与CSS处理类似）？
      1）将所有用到的js api封装在一个全局的对象中
     */
    
    var MessageBox = React.createClass({
      render:function(){
        var _css = this.CSS;

        return (  <div style={styleSheets.div}>
                    <h1 style={styleSheets.h1}>Hello React!</h1>
                    <p style={_css.p}>React content message</p>
                    <button onClick={action.handlerClick}>点击事件</button>
                    <button onTouchEnd={action.handlerTouch}>触摸结束</button>
                  </div>
               )
      }
    });

    MessageBox.prototype.CSS = {
      p:{
        color:"blue"
      }
    };

    ReactDOM.render( <MessageBox/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
</script>
</body>
</html>